<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商户-分类</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/merchant.css">
</head>

<body>
    <div id="backstage" class="layui-layout layui-layout-admin">
        <union-header :header="header"></union-header>
        <uniocn-side :side="side"></uniocn-side>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="finance-com" id="business">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" style="border-bottom:10px solid #eee ">
                        <li class="layui-this">商户分类管理</li>
                        <li>添加商户分类</li>
                    </ul>
                    <div class="layui-tab-content" style="padding: 0">
                        <div class="layui-tab-item layui-show">
                            <p class="add-title">顺序号越大排列越靠前</p>
                            <div style="box-sizing: border-box;padding: 0 15px">
                                <table class="layui-table " >
                                    <colgroup>
                                        <col width="10%">
                                        <col width="25%">
                                        <col width="10%">
                                        <col width="15%">
                                        <col width="15%">
                                        <col width="25%">
                                    </colgroup>
                                    <tr>
                                        <th>分组图片</th>
                                        <th>分组名称</th>
                                        <th>分类ID</th>
                                        <th>开启状态</th>
                                        <th>显示顺序</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="(item,index) in groupData">
                                        <td>
                                            <p class="classImg">
                                                <img :src="item.img" alt="">
                                            </p>
                                        </td>
                                        <td>
                                            <span>{{item.groupingName}}</span>
                                            <span style="margin-left: 10px">
                                            <i class="layui-icon layui-icon-add-1" style="color: #367AB7"></i>
                                            <a href="" style="color: #367AB7">添加子分类</a>
                                            <i class="layui-icon layui-icon-triangle-d" style="color: #D9534F"></i>
                                        </span>
                                        </td>
                                        <td>
                                            <p>
                                                <button class="layui-btn layui-btn-sm " style="background: #F8AC59">1</button>
                                            </p>
                                        </td>
                                        <td>
                                            <p>
                                                <button class="layui-btn layui-btn-sm " :class="[item.switch?'gropingActive':'gropingBtn']"
                                                        @click='stateuSwitch(index)'>
                                                    {{item.switch?'开启':'关闭'}}
                                                </button>
                                            </p>
                                        </td>
                                        <td>
                                            <p>{{item.order}}</p>
                                        </td>
                                        <td>
                                            <p>
                                                <button class="layui-btn layui-btn-primary layui-btn-sm">复制链接</button>
                                                <button class="layui-btn layui-btn-primary layui-btn-sm" @click='editTable(index)'>编辑</button>
                                                <button class="layui-btn layui-btn-sm" style="background: #ED5565" @click='delTable(index)'>删除</button>
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                                <div class="tabBox">
                                    <div id="businessPage"></div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-tab-item ">
                            <p class="add-title">分类管理</p>
                            <form style="padding: 15px" class="layui-form" action="##">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">分类名称</label>
                                    <div class="layui-input-block" style="width: 40%;display: flex;">
                                        <input type="text" name="name" required lay-verify="required" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">分类图片</label>
                                    <div class="layui-input-block" style="width: 40%;display: flex;">
                                        <input type="text" name="name" required lay-verify="required" autocomplete="off"
                                            class="layui-input">
                                        <button type="button" class="layui-btn layui-btn-primary" id="test1">选择图片</button>
                                    </div>
                                </div>
                                <div class="layui-upload-list" style='box-sizing: border-box;padding-left: 10%;margin-bottom: 10px'>
                                    <img style="width:100px;height:100px" class="layui-upload-img" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                                
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否开启</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="switch" value="开启" title="开启">
                                        <input type="radio" name="switch" value="关闭" title="关闭" checked>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">分类排序</label>
                                    <div class="layui-input-block" style="width: 40%;display: flex;">
                                        <input type="text" name="name" required lay-verify="required" placeholder="顺序号越大排列越靠前"
                                            autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/vue2.5.16.js"></script>
    <script src="./js/public.js"></script>
    <script src="./js/data.js"></script>
    <script>
        layui.use(['layer', 'form', 'laypage','upload'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laypage = layui.laypage;
            var upload = layui.upload;
            //执行一个laypage实例
            laypage.render({
                elem: 'businessPage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: 50 //数据总数，从服务端得到
            });
            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
        new Vue({
            el: "#backstage",
            data: {
                header: data.header,
                side: data.side,
                groupData: [
                    { img: "./images/userImg.png", groupingName: "八戒", order: '1', switch: false }
                ]
            },
            methods: {
                // 状态切换
                stateuSwitch: function (index) {
                    this.groupData[index].switch = !this.groupData[index].switch
                },
                // 编辑
                editTable: function (index) {

                },
                //删除
                delTable: function (index) {
                    var that = this;
                    layer.confirm('确定删除吗?', {
                        btn: ['确认', '取消'] //按钮
                    }, function () {
                        that.groupData.splice(index, 1)
                        layer.msg('删除成功', { icon: 1 });
                    }, function () {
                        layer.msg('取消了删除', { icon: 0 });
                    });
                }
            }
        })

    </script>
</body>

</html>